import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:travel/components/attractions/album.dart';
import 'package:travel/components/attractions/review.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';

class AlbumController extends GetxController {
  RxInt tabIndex = 0.obs;

  RxDouble width = 172.0.obs;

  RxList<String> tabs = RxList(['景点相册', '游客评论']);

  late PageController pageController;

  @override
  void onInit() {
    super.onInit();
    pageController = PageController(initialPage: tabIndex.value);
  }

  @override
  void onClose() {
    super.onClose();
    pageController.dispose();
  }
}

class AlbumView extends GetView<AlbumController> {
  const AlbumView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            automaticallyImplyLeading: true,
            leading: InkWell(
              onTap: () {
                Get.back();
              },
              child: Icon(
                Icons.arrow_back_ios,
                color:
                    ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
            title: Text(
              '故宫博物馆',
              style: StylesUtils.customTextStyle(
                  fontSize: 18.sp, color: ColorsUtils.color0000),
            ),
            actions: [
              IconButton(
                icon: Icon(
                  Icons.share,
                  color: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.color3333),
                ),
                onPressed: () async {
                  // int? index = await ToolsUtils.openShare(context);
                },
              ),
            ],
            bottom: bottom,
          ),
          body: PageView(
            controller: controller.pageController,
            onPageChanged: (int index) {
              controller.tabIndex.value = index;
            },
            children: const [AlbumListPageSate(), VisitorReviewPageState()],
          ),
        ));
  }

  PreferredSize get bottom {
    var pad = (Get.width - controller.width.value * controller.tabs.length) / 2;
    return PreferredSize(
      preferredSize: Size.fromHeight(35.h),
      child: Container(
        decoration: const BoxDecoration(color: Colors.white),
        padding: EdgeInsets.symmetric(horizontal: pad),
        child: Stack(
          children: [
            SizedBox(
              height: 35.h,
              child: Row(
                children: controller.tabs
                    .asMap()
                    .map((index, e) => MapEntry(
                        index,
                        Expanded(
                            child: InkWell(
                          onTap: () {
                            controller.tabIndex.value = index;
                            controller.pageController.animateToPage(index,
                                duration: const Duration(milliseconds: 300),
                                curve: Curves.linear);
                          },
                          child: Center(
                            child: Text(e, style: getActiveStyle(index)),
                          ),
                        ))))
                    .values
                    .toList(),
              ),
            ),
            AnimatedPositioned(
              width: controller.width.value,
              height: 2,
              bottom: 0,
              left: controller.tabIndex.value * controller.width.value,
              duration: const Duration(milliseconds: 100),
              child: Container(
                width: controller.width.value,
                height: 2,
                decoration: BoxDecoration(
                    color: ColorsUtils.parseColorFromHexString(
                        ColorsUtils.color3478)),
              ),
            )
          ],
        ),
      ),
    );
  }

  TextStyle getActiveStyle(int index) {
    if (controller.tabIndex.value == index) {
      return StylesUtils.customTextStyle(
          fontSize: 15.sp,
          fontWeight: FontWeight.bold,
          color: ColorsUtils.color0000);
    }
    return StylesUtils.customTextStyle(
        fontSize: 15.sp, color: ColorsUtils.color5555);
  }
}
